<template>
    <div class="amount-adjust-page">
        <!-- 单据日期 -->
        <el-form :model="form" inline label-width="80px" class="date-form">
            <el-form-item label="单据日期">
                <el-date-picker v-model="form.billDate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
                    style="width: 120px" />
            </el-form-item>
        </el-form>

        <!-- 商品录入表格 -->
        <el-table :data="tableData" border style="width: 100%; margin-top: 12px"
            :header-cell-style="{ background: '#F2F2F2' }">
            <!-- 操作列（新增/删除行） -->
            <el-table-column label="操作" width="80" align="center">
                <template #default="scope">
                    <!-- 新增行按钮 -->
                    <el-button type="text" icon="el-icon-plus" @click="addRow(scope.$index)">添加</el-button>
                    <!-- 删除行按钮（首行隐藏） -->
                    <el-button type="text" icon="el-icon-delete" @click="deleteRow(scope.$index)"
                        v-if="scope.$index > 0">减少</el-button>
                </template>
            </el-table-column>
            <!-- 商品-扫描枪录入列 -->
            <el-table-column label="*商品--扫描枪录入" width="300">
                <template #default="scope">
                    <el-input v-model="scope.row.goodsInput" placeholder="输入商品或扫码" />
                </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="100" />
            <el-table-column prop="brand" label="品牌" width="120" />
            <el-table-column prop="adjustAmount" label="*调整金额" width="120">
                <template #default="scope">
                    <el-input v-model.number="scope.row.adjustAmount" placeholder="输入金额" clearable
                        @input="calculateTotal" />
                </template>
            </el-table-column>
            <el-table-column prop="warehouse" label="*仓库" width="150">
                <template #default="scope">
                    <el-select v-model="scope.row.warehouse" placeholder="选择">
                        <el-option label="主仓" value="main" />
                        <el-option label="副仓" value="sub" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="batch" label="批量" width="100" />
            <el-table-column prop="remark" label="备注" width="120" />
        </el-table>

        <!-- 合计行 -->
        <el-table :data="summaryData" border style="width: 100%; margin-top: 0"
            :header-cell-style="{ background: '#FDE9CC' }">
            <el-table-column label="合计：" width="80" />
            <el-table-column label="调整金额合计" width="120">
                <template #default>
                    <span>{{ totalAdjustAmount.toFixed(2) }}</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 无备注信息提示 -->
        <div class="no-remark" style="margin-top: 8px">
            暂无备注信息
        </div>
    </div>
</template>

<script>
import { reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';

export default {
    name: 'AmountAdjustPage',
    setup() {
        // 表单数据（单据日期）
        const form = reactive({
            billDate: '2023-06-25', // 模拟默认日期
        });

        // 表格数据：初始至少1行
        const tableData = reactive([
            {
                goodsInput: '',
                unit: '',
                brand: '',
                adjustAmount: 0,
                warehouse: '',
                batch: '',
                remark: '',
            },
        ]);

        // 计算调整金额合计
        const totalAdjustAmount = computed(() => {
            return tableData.reduce(
                (sum, item) => sum + item.adjustAmount,
                0
            );
        });

        // 方法：新增行（在当前行下方插入空行）
        const addRow = (index) => {
            tableData.splice(index + 1, 0, {
                goodsInput: '',
                unit: '',
                brand: '',
                adjustAmount: 0,
                warehouse: '',
                batch: '',
                remark: '',
            });
        };

        // 方法：删除行（首行不可删除）
        const deleteRow = (index) => {
            if (index === 0) {
                ElMessage.warning('首行不可删除');
                return;
            }
            tableData.splice(index, 1);
        };

        return {
            form,
            tableData,
            totalAdjustAmount,
            addRow,
            deleteRow,
        };
    },
};
</script>

<style scoped>
.amount-adjust-page {
    padding: 24px;
    background: #fff;
    height: 800px;
}

.date-form {
    margin-bottom: 8px;
}

.el-table th {
    text-align: center;
}

.no-remark {
    color: #999;
    font-size: 12px;
}
</style>